<template>
  <div class="page">
    <div class="item">
      <div class="col">
        <h4>color</h4>
        <b-loading color="var(--success)" />
      </div>
      <div class="col">
        <h4>color</h4>
        <b-loading color="var(--info)" />
      </div>
      <div class="col">
        <h4>color</h4>
        <b-loading color="var(--warning)" />
      </div>
    </div>
    <div class="item">
      <div class="col">
        <h4>size:small</h4>
        <b-loading size="small" />
      </div>
      <div class="col">
        <h4>size:default</h4>
        <b-loading />
      </div>
      <div class="col">
        <h4>size:large</h4>
        <b-loading size="large" />
      </div>
    </div>

    <div class="item">
      <div class="col">
        <h4>icon</h4>
        <b-loading icon="iconfont icon-loading" />
      </div>
      <div class="col">
        <h4>icon</h4>
        <b-loading icon="iconfont icon-loading" color="var(--error)" icon-size="36px" />
      </div>
      <div class="col">
        <h4>icon</h4>
        <b-loading icon="iconfont icon-loading" />
      </div>
    </div>

    <div class="item">
      <div class="col">
        <h4>自定义</h4>
        <b-loading>
          <div class="iconfont icon-pingpangqiu" slot="icon"></div>
          <div slot="text">拼命加载中</div>
        </b-loading>
      </div>
      <div class="col">
        <h4>自定义</h4>
        <b-loading text="玩命加载中"></b-loading>
      </div>
      <div class="col">
        <h4>自定义</h4>
        <b-loading v-if="isShow" fix background-color="rgba(0,0,0,.4)"></b-loading>
        <div class="toggle">
          <b-switch v-model="isShow" size="large">
            <span slot="open">开</span>
            <span slot="close">关</span>
          </b-switch>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoadingPage",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    handleClick() {
      this.$Loading.config({
        text: "拼命加载中……",
        color: "var(--error)",
      });
      this.$Loading.show();
    },
  },
};
</script>
<style scoped>
.item {
  height: 200px;
  width: 100%;
  display: flex;
}
.col {
  flex: 1;
  position: relative;
}
h4 {
  text-align: center;
}
.icon {
  font-size: 42px;
  color: var(--info);
}
.group {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}
.toggle {
  position: relative;
  z-index: 10;
}
</style>